<template>
  <div class="inforCard">
    <div class="base-case">
      <div class="main-case">
        <div class="padding-case">
          <div class="setting-nav">
            <img
              src="@/assets/img/performance/personalCenter/settingicon.png"
              alt
              @click="goPersonal"
            >
          </div>
          <div class="main-content">
            <div class="left-case" @click="goPersonality">
              <img
                v-if="!list.pictureUrl"
                src="@/assets/img/designer/personalCenter/defaultHeadPortrait.png"
              >
              <img v-else :src="list.pictureUrl">
            </div>
            <div class="right-case">
              <div class="key-value">
                <div class="top-value">{{list.userName?list.userName:'待完善'}}</div>
                <div class="top-key">{{list.phone?list.phone:'待完善'}}</div>
              </div>
              <div class="key-value1">
                <div class="top-value">{{list.blackByMeCount?list.blackByMeCount:'0'}}</div>
                <div class="top-key">被拉黑</div>
              </div>
              <div class="key-value1" @click="goBacklist">
                <div class="top-value">{{list.blackCount?list.blackCount:'0'}}</div>
                <div class="top-key">黑名单</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="nav-rate">
      <div class="nav-case bgwrite">
        <div class="each-nave" @click="$router.push('/performance/myWallet')">
          <div class="top-img">
            <img src="@/assets/img/performance/personalCenter/walletbtn.png" alt>
          </div>
          <div class="foot-name">我的钱包</div>
        </div>
        <div class="each-nave" @click="$router.push('/performance/myIntroduction')"  v-if="isPerformance">
          <div class="top-img">
            <img src="@/assets/img/performance/personalCenter/introIcon.png" alt>
          </div>
          <div class="foot-name">我的简介</div>
        </div>
        <div class="each-nave" @click="$router.push('/performance/myAssess')">
          <div class="top-img">
            <img src="@/assets/img/performance/personalCenter/remarks.png" alt>
          </div>
          <div class="foot-name">我的评价</div>
        </div>
        <div class="each-nave" @click="goWithdrawUp" v-if="isPerformance">
          <div class="top-img">
            <img src="@/assets/img/performance/personalCenter/prewithdraw.png" alt>
          </div>
          <div class="foot-name">收费提额</div>
        </div>
      </div>
      <div class="rate-case bgwrite">
        <div class="top-rate flex">
          <div class="top-rate1 flex">
            <div class="rate-left ">综合评分</div>
            <div class="rate-mid">
              <van-rate v-model="remarkRate" :size="15" color="#FFBA5A" readonly :allow-half="true"/>
            </div>
            <div class="rate-right">
              <span>{{remarkRate}}</span>
            </div>
          </div>
        </div>
        <div class="linear-bar"></div>
        <div class="foot-rate">
          <div class="each-frate">
            <div class="rate-leftf">效率</div>
            <div class="rate-midf">
              <van-rate v-model="effectity" :size="12" color="#FFBA5A" readonly allow-half/>
            </div>
            <div class="rate-rightf">
              <span class="yellow-word" v-if="effectity >4 && effectity <=5">超棒</span>
              <span class="yellow-word" v-if="effectity >3 && effectity <=4">很好</span>
              <span class="gary-word" v-if="effectity >2 && effectity <=3">较好</span>
              <span class="gary-word" v-if="effectity >1 && effectity <=2">较差</span>
              <span class="gary-word" v-if="effectity >0 && effectity <=1">很差</span>
              <span class="gary-word" v-if="effectity == 0">暂无</span>
            </div>
          </div>
          <div class="each-frate">
            <div style="float: right; line-height: 0.24rem;">
              <div class="rate-leftf">服务</div>
              <div class="rate-midf">
                <van-rate v-model="service" :size="12" color="#FFBA5A" readonly allow-half/>
              </div>
              <div class="rate-rightf">
                <span class="yellow-word" v-if="service >4 && service <=5">超棒</span>
                <span class="yellow-word" v-if="service >3 && service <=4">很好</span>
                <span class="gary-word" v-if="service >2 && service <=3">较好</span>
                <span class="gary-word" v-if="service >1 && service <=2">较差</span>
                <span class="gary-word" v-if="service >0 && service <=1">很差</span>
                <span class="gary-word" v-if="service == 0">暂无</span>
              </div>
            </div>
          </div>
          <div class="each-frate">
            <div class="rate-leftf">沟通</div>
            <div class="rate-midf">
              <van-rate v-model="community" :size="12" color="#FFBA5A" readonly allow-half/>
            </div>
            <div class="rate-rightf">
              <span class="yellow-word" v-if="community >4 && community <=5">超棒</span>
              <span class="yellow-word" v-if="community >3 && community <=4">很好</span>
              <span class="gary-word" v-if="community >2 && community <=3">较好</span>
              <span class="gary-word" v-if="community >1 && community <=2">较差</span>
              <span class="gary-word" v-if="community >0 && community <=1">很差</span>
              <span class="gary-word" v-if="community == 0">暂无</span>
            </div>
          </div>
          <div class="each-frate">
            <div style="float: right; line-height: 0.24rem;">
              <div class="rate-leftf">质量</div>
              <div class="rate-midf">
                <van-rate v-model="quality" :size="12" color="#FFBA5A" readonly/>
              </div>
              <div class="rate-rightf">
                <span class="yellow-word" v-if="quality >4 && quality <=5">超棒</span>
                <span class="yellow-word" v-if="quality >3 && quality <=4">很好</span>
                <span class="gary-word" v-if="quality >2 && quality <=3">较好</span>
                <span class="gary-word" v-if="quality >1 && quality <=2">较差</span>
                <span class="gary-word" v-if="quality >0 && quality <=1">很差</span>
                <span class="gary-word" v-if="quality == 0">暂无</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import star from "@/components/performance/star_show/index.vue";
import { getuserUid, setUserInfo, getRole } from "@/utils/auth.js";
export default {
  data() {
    return {
      remarkRate: 0,
      effectity: 0,
      community: 0,
      service: 0,
      quality: 0,
      money: "", // 暂时处理数据 需要从接口加字段
      list: {},
      scoreDetail: [],
      isPerformance: false
    };
  },
  components: {
    star
  },
  computed: {},
  created() {
    if (getRole() == 2) {
      // 表现师
      this.isPerformance = true
    } else if (getRole() == 3) {
      // 改图师
      this.isPerformance = false
    }
    this.getUserMsgCenter();
  },
  mounted() {},
  methods: {
    // 我的作品
    toMyJob() {
      this.$router.push("myJobs");
    },
    //   黑名单
    goBacklist() {
      this.$router.push("/performance/backList");
    },
    // 我的设置
    goPersonal() {
      this.$router.push("/performance/myInfo");
    },
    // 我的 -  个人资料
    goPersonality() {
      this.$router.push('/performance/myPersonality')
    },
    // 跳转到收费提额
    goWithdrawUp() {
      this.$router.push({name:'performance-myWithdraw', params: {money: this.money}})
    },
    // 获取个人中心首页数据
    async getUserMsgCenter() {
      const res = await HTTP("userCenter", {
        userUid: getuserUid()
      });
      if (res.code == 200) {
        this.list = res.data;
        this.remarkRate = res.data.sumScore ? res.data.sumScore : 0;
        this.scoreDetail = res.data.scoreDetail;
        this.money = res.data.discountPrice
        setUserInfo(res.data)
        if (this.scoreDetail.length > 0) {
          this.scoreDetail.forEach((item)=>{
              if(item.assessType == 1) {
                  // 效率
                  this.effectity = item.score
              } else if (item.assessType == 2) {
                  // 服务
                  this.service = item.score
              } else if (item.assessType == 3) {
                  // 沟通
                  this.community = item.score
              } else if (item.assessType == 4) {
                  // 质量
                  this.quality = item.score
              }
          })
        } else {
          (this.effectity = 0),
            (this.community = 0),
            (this.service = 0),
            (this.quality = 0);
        }
      } else {
        this.$toast(res.msg || "服务器异常");
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.inforCard {
  position: relative;
  width: 100%;
  // 基本信息框
  .base-case {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    .main-case {
      width: 100%;
      height: 3.16rem;
      background-image: url(../../../assets/img/performance/personalCenter/backgroundIcon.png);
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% 3.16rem;
      .padding-case {
        box-sizing: border-box;
        padding: 0.24rem;
      }
      .setting-nav {
        position: relative;
        width: 100%;
        height: 0.5rem;
        margin-bottom: 0.24rem;
        img {
          position: absolute;
          right: 0;
          width: 0.5rem;
          height: 0.5rem;
        }
      }
      .main-content {
        display: flex;
        width: 100%;
        height: 1.28rem;
        div {
          display: inline-block;
        }
        .left-case {
          width: 1.28rem;
          height: 1.28rem;
          margin-right: 0.24rem;
          border-radius: 50%;
          background: #eeeeee;
          box-shadow: 0 0 0.1rem #fff;
          img {
            border-radius: 50%;
            width: 1.28rem;
            height: 1.28rem;
          }
        }
        .right-case {
          height: 1.28rem;
          display: flex;
          width: 80%;
          justify-content: space-around;
          align-items: center;
          text-align: center;
          .key-value{
              color:#FFFFFF;
              width: 35%;
              margin-right: 5%;
              .top-value{
                  display: block;
                  line-height: 0.32rem;
                  font-size: 0.32rem;
                  font-family: PingFangSC-Semibold;
                  font-weight: 600;
                  margin-bottom: 0.2rem;
                        word-wrap: normal;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
              }
              .top-key{
                  line-height: 0.26rem;
                  font-size: 0.26rem;
                  font-family: PingFangSC-Regular;
                  font-weight: 400;
              }
          }
          .key-value1{
              color:#FFFFFF;
              width: 30%;
              .top-value{
                  display: block;
                  line-height: 0.32rem;
                  font-size: 0.32rem;
                  font-family: PingFangSC-Semibold;
                  font-weight: 600;
                  margin-bottom: 0.2rem;
              }
              .top-key{
                  line-height: 0.26rem;
                  font-size: 0.26rem;
                  font-family: PingFangSC-Regular;
                  font-weight: 400;
              }
          }
        }
      }
    }
  }
  //  4入口 评价
  .nav-rate {
    position: fixed;
    top: 2.76rem;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0 0.24rem;
    margin-bottom: 0.24rem;
    // 4入口
    .nav-case {
      height: 1.8rem;
      margin-bottom: 0.24rem;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      border-radius: 0.1rem;
      .each-nave {
        height: 1rem;
        border-radius: 0.1rem;
        .top-img {
          height: 0.76rem;
          line-height: 0.76rem;
          img {
            width: 0.4rem;
          }
        }
        .foot-name {
          color: #656565;
          font-size: 0.24rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          line-height: 0.24rem;
        }
      }
    }
    // 评价
    .rate-case {
      box-sizing: border-box;
      height: 2.94rem;
      padding: 0 0.24rem;
      width: 100%;
      border-radius: 0.1rem;
      .top-rate {
        height: 0.99rem;
        width: 100%;
       
        align-items: center;
        .top-rate1{
            margin: auto;
        .rate-left {
          color: #656565;
          font-size: 0.28rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          margin-right: 0.2rem;
        }
        .rate-mid {
         margin-top: 0.05rem;
          margin-right: 0.2rem;
        }
        .rate-right {
          color: #959595;
          font-size: 0.3rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
        }
        }
        
      }
      .linear-bar {
        width: 100%;
        height: 0.02rem;
        background: linear-gradient(
          270deg,
          rgba(229, 229, 229, 0.3) 0%,
          rgba(229, 229, 229, 1) 51%,
          rgba(229, 229, 229, 0.3) 100%
        );
      }
      .foot-rate {
        box-sizing: border-box;
        width: 100%;
        padding: 0.6rem 0;
        div {
          display: inline-block;
        }
        .each-frate {
          width: 50%;
          .rate-leftf {
            color: #959595;
            font-size: 0.24rem;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            line-height: 0.24rem;
            margin-right: 0.14rem;
          }
          .rate-midf {
            line-height: 0.24rem;
            margin-right: 0.14rem;
          }
          .rate-rightf {
            line-height: 0.24rem;
            span {
              font-size: 0.24rem;
              font-family: PingFangSC-Regular;
              font-weight: 400;
            }
            .yellow-word {
              color: #ffba5a;
            }
            .gary-word {
              color: #cccccc;
            }
          }
        }
      }
    }
  }
}
</style>
